import Page from './Page'

import {
  Bar,
  Box,
  Triangle,
  Sight,
  Sun,
  CrhMiddle,
  Rail,
  Hero,
  Character,
  Chair,
  Slip,
  changeSpeed as Speed
} from './DataBus'

export class PageGame extends Page {
  constructor(_this) {
    super(_this);
    this.box = new Box(1);
    this.bg = new Box(1);
    this.finished = false;
    this.start = true;
    this.crh_middle = [];
    this.wall = [];
    this.sight = null;
    this.button = null;
    this.hero = null;
    this.char = [];
    this.chars = [];
    this.chair = [];
    this.chair2 = [];
    this.chair3 = [];
    this.slip = [];
    this.triangle = [];
    this.char_num = 0;
    this.speed = 50;
    this.syn = null;
    this.bar = null;
    //数据初始化
    this.init();
  }

  init() {
    let zoom;

    //按钮
    zoom = 2;
    let buttons = this.pl.getItem('button');
    this.button = new Sun({
      x: this.width / 2 - (buttons.getWidth() * zoom / 2),
      y: this.height * 0.6,
      item: buttons,
      zoom: zoom
    });

    //视野
    zoom = 15;
    const sights = this.pl.getItem('sight');
    this.sight = new Sight({
      x: this.width * 0.5 - (sights.getWidth() * zoom / 2),
      y: this.height * 0.3 - (sights.getHeight() * zoom / 2),
      item: sights,
      zoom: zoom
    });

    //初始化地图

    //列车中段
    const crh_middles = this.pl.getItem('map_back');
    let limit = 10; //车厢数量
    const crh_zoom = 0.5;
    const slips = this.pl.getItem('slip');
    const chair1 = this.pl.getItem('chair_01');
    const chair2 = this.pl.getItem('chair_02');
    const chair3 = this.pl.getItem('chair_03');
    const chair_num = 5;

    for (let i = 0; i < limit; i++) {
      //车厢
      this.crh_middle[i] = new CrhMiddle({
        x: i * (crh_middles.getWidth() * crh_zoom + 155),
        y: this.height * 0.4 - crh_middles.getHeight() * crh_zoom,
        item: crh_middles,
        zoom: crh_zoom
      });

      //车厢间隙
      this.slip[i + 1] = new Slip({
        x: this.crh_middle[i].x + this.crh_middle[i].getWidth() - 30,
        y: this.height * 0.4 - slips.getHeight() * crh_zoom,
        item: slips,
        // width:slips.getWidth(),
        // height:slips.getHeight(),
        zoom: crh_zoom
      });
      //座椅
      for (let j = 0; j < chair_num; j++) {
        this.chair[i * chair_num + j] = new Chair({
          x: this.crh_middle[i].x + j * chair1.getWidth() * crh_zoom + 65,
          y: this.height * 0.4 - chair1.getHeight() * crh_zoom - 1,
          item: chair1,
          zoom: crh_zoom
        });
        this.chair2[i * chair_num + j] = new Chair({
          x: this.chair[i * chair_num + j].x + 15,
          y: this.chair[i * chair_num + j].y,
          item: chair2,
          zoom: crh_zoom
        });
        this.chair3[i * chair_num + j] = new Chair({
          x: this.chair[i * chair_num + j].x + this.chair[0].getWidth(),
          y: this.chair[i * chair_num + j].y,
          item: chair2,
          zoom: crh_zoom
        })
      }
    }
    this.slip[0] = new Slip({
      x: -slips.getWidth() * crh_zoom + 30,
      y: this.height * 0.4 - slips.getHeight() * crh_zoom,
      item: slips,
      // width:slips.getWidth(),
      // height:slips.getHeight(),
      zoom: crh_zoom
    });

    //玩家
    zoom = crh_zoom;
    this.hero = new Hero({
      x: this.width / 2,
      y: this.height * 0.4 - 2,
      item: null,
      zoom: zoom,
      standX: Math.random() * 10 * this.crh_middle[0].getWidth(),
      standY: 0,
      speed: Speed(35),
      standItem: this.pl.getItem('hero_stand'),
      walkRight: this.pl.getItem('hero_right'),
      walkLeft: this.pl.getItem('hero_left'),
      climb: this.pl.getItem('hero_climb'),
      sitLeft: this.pl.getItem('hero_sit_left'),
      sitRight: this.pl.getItem('hero_sit_right'),
    });
    if (this.that.readymode === 'game') {
      this.hero.standX = 30;
    }

    //视觉三角
    this.triangle[0] = new Triangle({x: 0, y: 0, a: 0, color: null});

    //体力条
    this.bar = new Bar({
      x: this.width * 0.2,
      y: this.height * 0.4 + 10,
      a: 0,
      b: 10
    });

    //其他玩家
    for (let i = 0; i < 100; i++) {
      this.char[i] = new Character({});
    }

    //设置同步
    this.syn = window.setInterval(() => {
      // console.log(this.that.connect.getColor());
      this.that.connect.uploaddata({
        posx: Math.floor(this.hero.standX),
        standY: this.hero.standY,
        speed: this.hero.speed,
        status: this.hero.status,
        dir: this.hero.dir,
        standItem: 'hero_stand',
        walkRight: 'hero_right',
        walkLeft: 'hero_left',
        climb: 'hero_climb',
        sitLeft: 'hero_sit_left',
        sitRight: 'hero_sit_right',
        sitting: this.hero.sitting,
        climbing: this.hero.climbing,
        color: this.that.connect.getColor()
      });
    }, 100);

    //墙壁
    const walls = this.pl.getItem('wall');
    limit = 5;
    zoom = 2;
    for (let i = 0; i < limit; i++) {
      this.wall[i] = new Rail({
        x: i * walls.getWidth() * zoom,
        y: this.height * 0.3 - walls.getHeight() * zoom,
        item: walls,
        zoom: zoom
      })
    }

  }

  characterJudge(touch) {
    this.characterMove({x: touch.x1, y: touch.y1});
    if (touch.x2 !== -1 && touch.y2 !== -1) {
      this.characterMove({x: touch.x2, y: touch.y2});
    }

  }

  characterMove(touch) {
    let tX = this.button.getX(), tW = this.button.getWidth();
    let tY = this.button.getY(), tH = this.button.getHeight();
    let min = 0.25, max = 0.75;
    // console.log(touch);
    // console.log(tX);
    // console.log(tY);
    if (touch.x > tX && touch.x < tX + tW) {  //touch.x>tX+tW*min&&touch.x<tX+tW*max
      if (touch.y > tY && touch.y < tY + tH * min) {
        // console.log('up');
        // this.hero.setstandY(this.hero.getstandY()-this.hero.getspeed());
        this.hero.dir = 'up';
        if (this.hero.status === 'sitdown') {
          this.hero.status = 'getup';
        } else if (this.hero.status !== 'climbing' && this.hero.status !== 'getup' && this.hero.pp > 40) {
          this.crh_middle.forEach((item, i) => {
              if (item.getX() - 20 < this.hero.getstandX() && item.getX() + item.getWidth() - 260 > this.hero.getstandX()) {
                this.hero.pp -= 40;
                this.hero.climbing = 0;
                this.hero.status = 'climbing';
              }
            }
          );
        }
      } else if (touch.y < tY + tH && touch.y > tY + tH * max) {
        // console.log('down');
        // this.hero.setstandY(this.hero.getstandY()+this.hero.getspeed());
        this.hero.dir = 'down';
        if (this.hero.status === 'climbing') {
          this.hero.status = 'drop';
        } else if (this.hero.status !== 'sitdown' && this.hero.status !== 'drop') {
          for (let item in this.chair) {
            let tempx = this.width / 2 + this.hero.standX;
            let tempitem = this.chair[item];
            if (tempx > tempitem.x && tempx < tempitem.x + tempitem.getWidth()) {
              this.hero.sitting = 0;
              this.hero.status = 'sitdown';
              if (this.hero.dirc === 0) {
                if (tempx > (tempitem.getWidth() + 2 * tempitem.x) / 2) {
                  this.hero.standX = tempitem.x + tempitem.getWidth() - this.width / 2 - this.hero.getSit().getWidth() / 6 * this.hero.zoom;
                } else {
                  this.hero.dir = 'right';
                  this.hero.standX = tempitem.x - this.width / 2 + this.hero.getSit().getWidth() / 6 * this.hero.zoom;
                }

              } else {

                if (tempx < (tempitem.getWidth() + 2 * tempitem.x) / 2) {
                  this.hero.standX = tempitem.x + tempitem.getWidth() - this.width / 2 - this.hero.getSit().getWidth() / 6 * this.hero.zoom;
                } else {
                  this.hero.dir = 'left';
                  this.hero.standX = tempitem.x - this.width / 2 + this.hero.getSit().getWidth() / 6 * this.hero.zoom;
                }
              }
              break;
            }
          }

        }
      } else {
        // console.log('center');
      }
    }
    if (touch.y > tY && touch.y < tY + tH) { //touch.y>tY+tH*min&&touch.y<tY+tH*max
      if (touch.x > tX && touch.x < tX + tW * min) {
        // console.log('left');
        // this.hero.setstandX(this.hero.getstandX()-this.hero.getspeed());
        // this.hero.setspeed();

        if (this.hero.status === 'climbing') {
          this.hero.status = 'drop';
          this.hero.dir = 'left';
        } else if (this.hero.status === 'sitdown') {
          this.hero.status = 'getup'
        } else if (this.hero.status !== 'drop' && this.hero.status !== 'getup') {
          this.hero.status = 'walk';
          this.hero.dir = 'left';
        }
      } else if (touch.x > tX + max * tW && touch.x < tX + tW) {
        // console.log('right');
        // this.hero.setstandX(this.hero.getstandX()+this.hero.getspeed());
        // this.hero.setspeed();

        if (this.hero.status === 'climbing') {
          this.hero.status = 'drop';
          this.hero.dir = 'right';
        } else if (this.hero.status === 'sitdown') {
          this.hero.status = 'getup'
        } else if (this.hero.status !== 'drop' && this.hero.status !== 'getup') {
          this.hero.status = 'walk';
          this.hero.dir = 'right';
        }
      }
    }
  }

  display() {
    let speed = Speed(this.speed);

    //底色
    this.bg.paint(this);

    //绘制墙壁
    this.wall.forEach((item, i) => {
      this.ctx.drawImage(item.getPic(), item.getX(), item.getY(), item.getWidth(), item.getHeight());
      item.setX(item.getX() - speed);
      if (item.getX() + item.getWidth() < 0) {
        let max = 0;
        this.wall.forEach((temp, j) => {
          if (temp.getX() > max) max = temp.getX();
        });
        item.setX(max + item.getWidth() - speed);
      }
    });

    //绘制列车
    this.crh_middle.forEach((item, i) => {
      if (Math.random() > 0.9 || item.getJump()) {
        item.bang();
      }
      if (Math.abs(item.getX() - this.hero.getstandX() - 180) < item.getWidth() * 2) {
        this.ctx.drawImage(item.getPic(), item.getX() - this.hero.getstandX(), item.getY(), item.getWidth(), item.getHeight());
      }
    });

    //座位
    this.chair2.forEach((item, i) => {
      let temp = item.getX() - this.hero.getstandX() - 180;
      if (Math.abs(temp) < item.getWidth() * 2) {
        if (temp < 0) {
          this.ctx.drawImage(
            item.getPic(),
            0,
            0,
            item.getItem().getWidth() / 2,
            item.getItem().getHeight(),
            item.getX() - this.hero.getstandX(),
            item.getY(),
            (Math.abs(temp)) / 3,
            item.getHeight()
          );
        }
      }
    });
    this.chair3.forEach((item, i) => {
      let temp = item.getX() - this.hero.getstandX() - 180;
      if (Math.abs(temp) < item.getWidth() * 2) {
        if (temp > 0) {
          this.ctx.drawImage(
            item.getPic(),
            item.getItem().getWidth() / 2,
            0,
            item.getItem().getWidth() / 2,
            item.getItem().getHeight(),
            item.getX() - this.hero.getstandX() - (Math.abs(temp)) / 3,
            item.getY(),
            (Math.abs(temp)) / 3,
            item.getHeight()
          );
        }
      }
    });

    this.chair.forEach((item, i) => {
      if (Math.abs(item.getX() - this.hero.getstandX() - 180) < item.getWidth() * 3) {
        this.ctx.drawImage(item.getPic(), item.getX() - this.hero.getstandX(), item.getY(), item.getWidth(), item.getHeight());
      }
    });

    //人物
    //其他玩家
    this.chars = this.that.connect.getGamers();
    if (this.char_num !== this.that.connect.getidnum()) {
      for (let item in this.chars) {
        this.char[item].setSit({
          zoom: this.hero.zoom,
          standX: this.chars[item].posx,
          standY: this.chars[item].standY,
          speed: this.chars[item].speed,
          standItem: this.pl.getItem(this.chars[item].standItem),
          walkRight: this.pl.getItem(this.chars[item].walkRight),
          walkLeft: this.pl.getItem(this.chars[item].walkLeft),
          climb: this.pl.getItem(this.chars[item].climb),
          status: this.chars[item].status,
          dir: this.chars[item].dir,
          climbing: this.chars[item].climbing,
          sitLeft: this.pl.getItem(this.chars[item].sitLeft),
          sitRight: this.pl.getItem(this.chars[item].sitRight),
          sitting: this.chars[item].sitting
        });

        this.char[item].setspeed();
        if (this.triangle[item + 1]) {
          this.triangle[item + 1].setPos({     //视觉三角
            x: this.char[item].standX - this.hero.getstandX() + this.hero.x,
            y: this.hero.y + this.char[item].standY * 0.75 - this.hero.getStand().getHeight() * this.hero.zoom - 10,
            a: 10,
            color: this.chars[item].color
          });
        } else {
          this.triangle[item + 1] = new Triangle({
            x: this.char[item].standX - this.hero.getstandX() + this.hero.x,
            y: this.hero.y + this.char[item].standY * 0.75 - this.hero.getStand().getHeight() * this.hero.zoom - 10,
            a: 10,
            color: this.chars[item].color
          })
        }
        // console.log(this.triangle[item + 1]);
        this.triangle[item + 1].paint(this);
        this.char[item].paint(this);
      }
    }

    //玩家
    this.hero.setspeed();
    this.triangle[0].setPos({     //视觉三角
      x: this.hero.x,
      y: this.hero.y + this.hero.standY * 0.75 - this.hero.getStand().getHeight() * this.hero.zoom - 10,
      a: 10,
      color: this.that.connect.getColor()
    });
    this.triangle[0].paint(this);
    this.hero.paint(this);

    //列车间隙
    this.slip.forEach((item, i) => {
      if (Math.abs(item.getX() - this.hero.getstandX() - 180) < item.getWidth() * 2) {
        this.ctx.drawImage(item.getPic(), item.getX() - this.hero.getstandX(), item.getY(), item.getWidth(), item.getHeight());
      }
    });
    //视野
    if (this.start) {
      this.ctx.drawImage(this.sight.getPic(), this.sight.getX(), this.sight.getY() + this.hero.standY, this.sight.getWidth(), this.sight.getHeight());
    }

    //按钮
    this.ctx.drawImage(this.button.getPic(), this.button.getX(), this.button.getY(), this.button.getWidth(), this.button.getHeight());

    //渐变
    if (!this.finished && this.start) { //
      this.box.paint(this);
      this.box.subAlpha(0.05);
      if (this.box.getAlpha() <= 0) this.finished = true;
    }
    //体力条
    this.ctx.fillStyle = 'white';
    this.ctx.font = "15px Georgia";
    this.ctx.fillText('体力:', this.bar.x - 34, this.bar.y + 10);
    this.bar.setWidth(this.width * 0.6 * this.hero.pp / 100);
    // console.log(this.hero.pp);
    this.bar.paint(this);

    //显示信息
    let posnum = 10 - Math.floor((this.hero.getstandX() + 180) / (this.crh_middle[0].getWidth() + 155));
    this.ctx.fillStyle = 'white';
    this.ctx.font = "20px Georgia";
    this.ctx.fillText('当前车厢:' + posnum, this.width - 110, 30);


  }
}
